import React from "react";
import {designComponent, reactive, useModel} from "../../../src";

const Input = designComponent({
    props: {
        modelValue: {},
    },
    emits: {
        onUpdateModelValue: (val?: any) => true,
    },
    setup({props, event: {emit}}) {
        const model = useModel(() => props.modelValue, emit.onUpdateModelValue)
        return () => (
            <input type="text" v-model={model.value}/>
        )
    },
})

const AutoInheritChild = designComponent({
    slots: ['default'],
    setup({slots}) {
        return () => {
            console.log(slots.default())
            return (
                <div>
                    <h2>测试自动继承</h2>
                    <div>this is child</div>
                    {slots.default()}
                </div>
            )
        }
    },
})

const CustomInheritChild = designComponent({
    slots: ['default'],
    inheritAttrs: false,
    setup({slots, attrs}) {
        return () => {
            console.log(slots.default())
            return (
                <div>
                    <h2>测试手动继承</h2>
                    <div>this is child</div>
                    <div {...attrs}>
                        {slots.default()}
                    </div>
                </div>
            )
        }
    },
})

export const DemoUseModel = designComponent({
    setup() {
        const state = reactive({
            text: 'hello world'
        })
        return () => {
            return (
                <div>
                    <Input v-model={state.text}/>
                    {state.text}
                    <AutoInheritChild className={'hello world'} style={{color: 'red'}} {...{onClick: () => console.log('click')} as any}>
                        hello world
                    </AutoInheritChild>
                    <CustomInheritChild className={'hello world'} style={{color: 'red'}} {...{onClick: () => console.log('click')} as any}>
                        hello world
                    </CustomInheritChild>
                </div>
            )
        }
    },
})